import React, { useEffect } from 'react';
import './Swipers.css'
import 'swiper/css/bundle'

import { Pagination } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';


const Swipers = (props) => {
    const imgList = props.swiperImg

    // useEffect(() => {
    //     setTimeout(() => {
    //         new Swiper('.swiper-container', {
    //             loop: true,
    //             autoplay: {
    //                 delay: 1000
    //             },
    //             pagination: {
    //                 el: '.swiper-pagination',
    //                 type: 'bullets',
    //                 clickable: true
    //             }
    //         })
    //     }, 100)
    // }, [])

    return (
        <div className="rotation-box">
            <Swiper
                modules={[Pagination]}
                pagination={{ clickable: true, type: "bullets" }}
                className='rotation-swiper'
            >
                    {
                        imgList.map((item, index) => {
                            return (
                                <SwiperSlide 
                                    key={item.id}
                                    className='rotation-slide'
                                >
                                    <a href={item.linkUrl}>
                                        <img src={item.picUrl} className='rotationChart-img' />
                                    </a>
                                </SwiperSlide>
                            )
                        })
                    }
            </Swiper>
        </div>

        // <div className="rotation-box">
        //     <div className="swiper-container" >
        //         <div className="swiper-wrapper">
        //         {
        //             imgList.map((item, index) => {
        //                 return (
        //                     <div 
        //                     key={index}
        //                     className="swiper-slide">
        //                         <a href={item.linkUrl}>
        //                             <img src={item.picUrl} className='rotationChart-img' />
        //                         </a>
        //                     </div>
        //                 )
        //             })
        //         }
        //         </div>
        //         <div className="swiper-pagination" slot="pagination"></div>
        //     </div>

        // </div>
    )
}

export default Swipers